<template>
   <div class="order-manage">
     <div class="box-top">
      <el-form>
        <el-form-item label="账号">
              <el-input clearable placeholder="请输入账号" v-model="account"></el-input>
          </el-form-item>
        <el-form-item label="关键字检索">
          <el-input placeholder="请输入关键字" clearable v-model="keywords"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
     </div>
     <div class="box-mid">
       <el-button @click="handleExport">导出</el-button>
       <el-button type="primary" @click="add">新增</el-button>
     </div>
    <el-table v-loading="loading" class="res-manage-table" :data="tableData" border style="width: 100%">
      <el-table-column show-overflow-tooltip align="center" v-for="(item, index) in tableList" :key="index" :prop="item.value?item.value:'暂无'" :label="item.label">
        <template slot-scope="scope">
          <el-tooltip content="设置" placement="right-start" v-if="item.value ==='status'">
                <el-switch v-model="scope.row.zhStatus" @change="enableSetChange(scope.row)"></el-switch>
          </el-tooltip>
          <el-tooltip content="设置" placement="right-start" v-else-if="item.value ==='account_status'" >
                <el-switch v-model="scope.row.aStatus" @change="enableSetChange2(scope.row)"></el-switch>
          </el-tooltip>
           <span v-else v-text="scope.row[item.value]?scope.row[item.value]:'暂无'"></span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button class="btn" type="text" v-if ="scope.row.sendAuthCode ===true" style="color:red">{{scope.row.auth_time}}</el-button>
          <el-button class="btn" @click="sendCode(scope.row)" type="text" v-else >验证码</el-button>
          <el-button class="btn" @click="edit(scope.row)" type="text">修改</el-button>
          <el-button class="btn" @click="sendbtn(scope.row)" type="text">发消息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改会员信息" :visible.sync="reviewBox" width="800px">
      <el-form :model="editData" label-width="85px"
                   ref="editData" :rules="editRules">
        <el-row :gutter="20">
          <el-col :span="12">
                  <el-form-item label="会员姓名" prop="nickname">
                      <el-input clearable v-model="editData.nickname" placeholder="请输入会员姓名" :maxlength="10"></el-input>
                  </el-form-item>
          </el-col>
          <el-col :span="12">
                  <el-form-item label="银行卡号" prop="card_no">
                      <el-input clearable v-model.number="editData.card_no" placeholder="请输入银行卡号" :maxlength="20"></el-input>
                  </el-form-item>
          </el-col>
          <el-col :span="12">
                  <el-form-item label="手机号码" prop="mobile">
                      <el-input clearable v-model.number="editData.mobile" placeholder="请输入手机号码" :maxlength="11"></el-input>
                  </el-form-item>
          </el-col>
          <el-col :span="12">
                  <el-form-item label="省市地址" prop="city">
                      <el-input clearable v-model="editData.city" placeholder="请输入省市地址" :maxlength="50"></el-input>
                  </el-form-item>
          </el-col>
          <el-col :span="12">
                  <el-form-item label="代理编码" prop="invite_code">
                      <el-input clearable v-model="editData.invite_code" placeholder="请输入代理编码" :maxlength="20"></el-input>
                  </el-form-item>
          </el-col>
          <el-col :span="12">
                  <el-form-item label="余额（元）" prop="balance">
                      <el-input clearable v-model.number="editData.balance" placeholder="请输入余额（元）" :maxlength="10"></el-input>
                  </el-form-item>
          </el-col>
          <el-col :span="12">
                  <el-form-item label="备注" prop="remark">
                      <el-input clearable v-model="editData.remark" placeholder="请输入备注" :maxlength="50"></el-input>
                  </el-form-item>
          </el-col>
          <el-col :span="12">
                  <el-form-item label="登录密码" prop="login_password">
                      <el-input clearable v-model="editData.login_password" placeholder="请输入新的会员登录密码" :maxlength="30"></el-input>
                  </el-form-item>
          </el-col>
          <el-col :span="12">
                  <el-form-item label="提现密码" prop="withdraw_password">
                      <el-input clearable v-model="editData.withdraw_password" placeholder="请输入新的会员提现密码" :maxlength="30"></el-input>
                  </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviewBox=false">取 消</el-button>
        <el-button type="primary" @click="Confirm()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增会员" :visible.sync="addShow" width="800px">
      <el-form :model="addDataInt" label-width="85px"
                   ref="addData" :rules="addRules">
          <el-row :gutter="20">
            <el-col :span="12">
                  <el-form-item label="用户名" prop="username">
                      <el-input clearable v-model="addDataInt.username" placeholder="请输入用户名" :maxlength="10"></el-input>
                  </el-form-item>
            </el-col>
            <el-col :span="12">
                  <el-form-item label="会员昵称" prop="nickname">
                      <el-input clearable v-model="addDataInt.nickname" placeholder="请输入会员姓名" :maxlength="10"></el-input>
                  </el-form-item>
            </el-col>
            <el-col :span="12">
                  <el-form-item label="密码" prop="password">
                      <el-input clearable v-model="addDataInt.password" placeholder="请输入密码" :maxlength="10"></el-input>
                  </el-form-item>
            </el-col>
            <el-col :span="12">
                    <el-form-item label="手机号码" prop="mobile">
                        <el-input clearable v-model.number="addDataInt.mobile" placeholder="请输入手机号码" :maxlength="11"></el-input>
                    </el-form-item>
            </el-col>
            <el-col :span="12">
                    <el-form-item label="省市地址" prop="city">
                        <el-input clearable v-model="addDataInt.city" placeholder="请输入省市地址" :maxlength="50"></el-input>
                    </el-form-item>
            </el-col>
            <el-col :span="12">
                    <el-form-item label="金额（元）" prop="balance">
                        <el-input clearable v-model.number="addDataInt
                        .balance" placeholder="请输入金额（元）" :maxlength="10"></el-input>
                    </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addShow=false">取 消</el-button>
        <el-button type="primary" @click="addMange">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="会员消息发送" :visible.sync="showSend" width="520px">
      <el-form :model="sendData" label-width="60px"
                   ref="sendData" :rules="sendRules">
           <el-row :gutter="20">
             <el-col :span="24">
                  <el-form-item label="标题:" prop="title">
                      <el-input v-model="sendData.title" clearable placeholder="请输入标题" :maxlength="30" style="width:100%"></el-input>
                  </el-form-item>
              </el-col>
             <el-col :span="24">
                  <el-form-item label="内容:" prop="content">
                     <el-input type="textarea" rows="5" placeholder="请输入内容" v-model="sendData.content" :maxlength="200"></el-input>
                  </el-form-item>
              </el-col>
           </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showSend=false">取 消</el-button>
        <el-button type="primary" @click="send()">确 定</el-button>
      </span>
    </el-dialog>
    <div class="box-pagenation">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  data () {
    const wordsxz = (rule, value, callback) => {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error('密码不能输入汉字!'))
        } else {
          callback()
        }
      }
      callback()
    }
    return {
      loading: false,
      account: '',
      currentPage: 1, // 当前页
      total: 0,
      pageSize: 10,
      tableData: [],
      tableList: [
        { value: 'username', label: '会员昵称' },
        { value: 'nickname', label: '姓名' },
        { value: 'card_no', label: '银行卡号' },
        { value: 'mobile', label: '电话号码' },
        { value: 'city', label: '所在省市' },
        { value: 'invite_code', label: '代理编码' },
        { value: 'balance', label: '账户余额' },
        { value: 'status', label: '账户状态' },
        { value: 'account_status', label: '存提款状态' }
      ],
      reviewBox: false,
      showSend: false,
      editData: {},
      editRules: {
        nickname: [ { required: true, message: '请输入会员姓名', trigger: 'blur' } ],
        mobile: [
          {
            validator: (rule, value, callback) => {
              if (!(/^[1][3578][0-9]{9}$/.test(value))) {
                callback(new Error('请输入正确手机号'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ],
        balance: [ { type: 'number', message: '余额必须数字值' } ],
        login_password: [ { validator: wordsxz, trigger: 'blur' } ],
        withdraw_password: [ { validator: wordsxz, trigger: 'blur' } ]
      },
      sendData: {
        member_id: '',
        title: '',
        content: ''
      },
      sendRules: {
        title: [ { required: true, message: '请输入标题', trigger: 'blur' } ],
        content: [ { required: true, message: '请输入发送内容', trigger: 'blur' } ]
      },
      keywords: '',
      yue: null,
      addShow: false,
      addData: {
        nickname: '',
        username: '',
        password: '',
        mobile: '',
        balance: '',
        city: ''
      },
      addDataInt: {},
      addRules: {
        nickname: [ { required: true, message: '请输入会员姓名', trigger: 'blur' } ],
        balance: [ { type: 'number', message: '金额必须数字值' } ],
        username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ],
        mobile: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!(/^[1][3578][0-9]{9}$/.test(value))) {
                callback(new Error('请输入正确手机号'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ],
        password: [{ required: true, validator: wordsxz, trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getData()
  },
  computed: {
    balance () {
      return this.editData.balance
    }
  },
  watch: {

  },
  methods: {
    ...mapActions({
      memberManage: 'memberManage/getManage',
      editManage: 'memberManage/editManage',
      sendePhone: 'memberManage/sendePhone',
      sendMsg: 'memberManage/sendMsg',
      addhy: 'memberManage/addhy'
    }),
    handleExport () {
      let params = {
        keyword: this.keywords,
        page: this.currentPage,
        pageSize: this.pageSize,
        account: this.account,
        type: 2
      }
      window.location.href = `${window.location.origin}/app/admin/download/download-l?${this.$pars(params)}`
    },
    handleSizeChange (val) {
      this.pageSize = val
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getData()
    },
    handleReset () { // 重置
      this.keywords = ''
      this.account = ''
      this.getData()
    },
    handleSearch () {
      this.currentPage = 1
      this.getData()
    },
    // 修改账户状态
    enableSetChange (row) {
      let params = {
        member_id: row.member_id,
        status: row.status ? 1 : 2
      }
      this.editManage(params).then(res => {
        this.$message({
          type: 'success',
          message: '账户状态修改成功!'
        })
      })
    },
    // 修改存提款状态
    enableSetChange2 (row) {
      let params = {
        member_id: row.member_id,
        account_status: row.aStatus ? 1 : 2
      }
      this.editManage(params).then(res => {
        this.$message({
          type: 'success',
          message: '存提款状态修改成功!'
        })
      })
    },
    // 发送验证码
    sendCode (row) {
      let params = {
        mobile: row.mobile
      }
      this.sendePhone(params).then(res => {
        this.$message({
          type: 'success',
          message: '验证码发送成功!'
        })
        this.getAuthCode(row)
      })
    },
    // 验证码计时器
    getAuthCode (row) {
      this.$set(row, 'sendAuthCode', true)
      this.$set(row, 'auth_time', 60)
      let timetimer = setInterval(() => {
        row.auth_time--
        if (row.auth_time <= 0) {
          this.$set(row, 'sendAuthCode', false)
          clearInterval(timetimer)
        }
      }, 1000)
    },
    // 获取会员分页信息
    getData () {
      let params = {
        keyword: this.keywords,
        page: this.currentPage,
        pageSize: this.pageSize,
        account: this.account
      }
      this.loading = true
      this.memberManage(params).then(res => {
        this.tableData = res.items
        this.total = res.count
        this.tableData.forEach(item => {
          this.$set(item, 'zhStatus', item.status === '1')
          this.$set(item, 'aStatus', item.account_status === '1')
        })
      }).finally(() => {
        this.loading = false
      })
    },
    // 修改会员信息
    edit (row) {
      if (this.$refs['editData']) {
        this.$refs['editData'].resetFields()
      }
      this.reviewBox = !this.reviewBox
      this.editData = { ...row }
      this.yue = row.balance
    },
    // 修改提交
    Confirm () {
      this.$refs['editData'].validate((valid) => {
        if (valid) {
          const { nickname, city, mobile } = this.editData
          let params = { member_id: this.editData.member_id, nickname, card_no: this.editData.card_no, city, mobile, invite_code: this.editData.invite_code, remark: this.editData.remark, login_password: this.editData.login_password, withdraw_password: this.editData.withdraw_password }
          if (this.yue !== this.editData.balance) {
            params.balance = this.editData.balance.toFixed(2)
          }
          this.editManage(params).then(res => {
            this.reviewBox = !this.reviewBox
            this.$message({
              type: 'success',
              message: '修改会员信息成功!'
            })
            this.getData()
          })
        }
      })
    },
    // 发消息
    sendbtn (row) {
      if (this.$refs['sendData']) {
        this.$refs['sendData'].resetFields()
      }
      this.showSend = !this.showSend
      this.sendData.member_id = row.member_id
    },
    // 消息提交
    send () {
      this.$refs['sendData'].validate((valid) => {
        if (valid) {
          let params = { ...this.sendData }
          this.sendMsg(params).then(res => {
            this.showSend = !this.showSend
            this.$message({
              type: 'success',
              message: '会员消息发送成功!'
            })
            this.getData()
          })
        }
      })
    },
    // 新增会员
    add () {
      this.addDataInt = { ...this.addData }
      this.addShow = !this.addShow
      if (this.$refs['addData'] !== undefined) {
        this.$refs['addData'].resetFields()
      }
    },
    // 新增会员提交
    addMange () {
      this.$refs['addData'].validate((valid) => {
        if (valid) {
          let params = { ...this.addDataInt }
          this.addhy(params).then(res => {
            this.addShow = !this.addShow
            this.$message({
              type: 'success',
              message: '新增会员成功!'
            })
            this.getData()
          })
        }
      })
    }
  }
}
</script>
<style lang="less" >
  .order-manage {
    .text-area-nopass {
      width: 80%;
      margin-top: 20px;
    }
    .nopass-reason {
      margin-top: 0;
    }
    .img {
      width: 100%;
      height: 80px;
      border: none;
    }
    .pic {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }
    .more-con p {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .more-left {
      justify-content: flex-start !important;
    }
    .more-item {
      white-space: nowrap;
      width: 50%;
    }
    .review-box {
      text-align: center;
    }
    .action-bar {
      width: 100%;
      height: 44px;
      display: flex;
      align-items: center;
      font-size: 12px;
      span {
        color: #606266;
        cursor: pointer;
        display: flex;
        align-items: center;
      }
      i {
        font-size: 18px;
        margin-right: 5px;
      }
    }
    .date-picker {
      width: 400px;
    }
    .el-pagination {
      margin: 15px;
      text-align: center;
    }
    .btn {
      width: initial !important;
    }
  }
</style>
